<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>
<button onclick="alert('点击了按钮1')">按钮1</button>
<button id="btn2">按钮2</button>
<h4>今天星期一</h4>
<span>我嘞个豆</span>
<h4>后天星期三</h4>

<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi aspernatur earum iusto maxime minus non odit,
    officiis optio quam, quia reiciendis rem repellendus suscipit totam! Dolores natus omnis quis!
  </div>
  <div>Animi, aperiam asperiores autem beatae consequatur consequuntur enim eos expedita facilis fuga fugit illum iure
    iusto minima minus numquam optio perspiciatis, possimus quia quibusdam quisquam ratione ullam unde veniam voluptas!
  </div>
  <div>Alias blanditiis commodi, dolorum eaque ipsum iusto natus necessitatibus, nemo neque nobis, non odio reiciendis
    tempore temporibus voluptatum. Aliquid asperiores corporis et in nesciunt nihil pariatur perferendis perspiciatis
    suscipit vel?
  </div>
  <div>Adipisci, alias, aliquam autem deserunt eius eligendi exercitationem iure natus neque nisi non pariatur quia rem
    sit temporibus tenetur, unde voluptatem. Beatae doloribus eaque esse expedita ipsa laboriosam rerum ullam!
  </div>
  <div>Ab ea fugit labore perferendis, sunt totam! Ab delectus, ea eius itaque laboriosam molestiae mollitia? Animi
    consectetur culpa, deleniti dolore eius excepturi modi, omnis placeat possimus quae rem, rerum vero!
  </div>
  <div>At cupiditate debitis dolore facere magnam mollitia quos reprehenderit repudiandae veniam voluptatum. Aliquid
    atque cumque dicta distinctio dolor dolores, enim expedita facere labore magnam magni, officiis perspiciatis vel
    voluptas voluptatibus!
  </div>
  <div>Ab architecto dicta doloribus iure maiores rem tempora vel veniam, voluptates! Ab accusantium aliquid aspernatur
    atque beatae dicta dolorum ea, illo in minima minus obcaecati pariatur praesentium repudiandae sit voluptates.
  </div>
  <div>Ab accusamus cum cumque deserunt earum incidunt ipsum nemo, nobis rem repellat. Adipisci, animi atque corporis
    dignissimos dolorum eos facilis fugit ipsum, nam, neque non obcaecati officiis placeat quo recusandae!
  </div>
  <div>Architecto atque, aut dolorem doloremque expedita laboriosam magnam maiores nesciunt nostrum obcaecati odit
    possimus, quas sapiente sed, tempora ullam veritatis? A aspernatur corporis doloremque iure, laudantium officiis
    veniam vero vitae.
  </div>
  <div>Ad cupiditate et eveniet impedit qui tempore veniam veritatis? Accusantium ad alias, assumenda at consequatur cum
    earum ex, expedita impedit necessitatibus nemo obcaecati perspiciatis praesentium repudiandae, rerum saepe sapiente
    ullam!
  </div>
  <div>Cumque explicabo numquam odit quae. Aperiam dolorem minima, quas sed vel vitae! A, alias, dicta distinctio dolor
    eveniet exercitationem in iure maxime quas quidem repellendus sed temporibus ullam vel veniam.
  </div>
  <div>Deserunt eos, quisquam! Ab aut cum deleniti enim, eum in incidunt ipsum laborum nemo officia optio quis saepe
    sint sit tempore vitae voluptate voluptates voluptatum. Architecto quisquam tempora temporibus voluptatem.
  </div>
  <div>Culpa dolore, esse id officia praesentium quas suscipit. Autem culpa deleniti dolorum ducimus ea error expedita
    iste, laudantium molestiae nam officia quam ratione repellendus, repudiandae sed ut veritatis voluptatem voluptates?
  </div>
  <div>Aperiam beatae blanditiis deserunt doloremque eius est, ex explicabo nobis numquam placeat, quasi quisquam sed
    velit. Ad aliquam, facere iusto labore neque nobis numquam omnis quam quod, repellendus sequi voluptatum!
  </div>
  <div>Consectetur cupiditate delectus non perspiciatis praesentium sed sint velit vero? Aliquam amet architecto commodi
    consectetur culpa delectus deserunt dolorem ex facilis fuga labore, nesciunt nostrum quis quisquam sint, sit
    voluptatibus?
  </div>
  <div>Amet asperiores deserunt doloribus est et excepturi facere laborum, nam necessitatibus praesentium reiciendis
    repellendus ullam, voluptates. A consequatur culpa deleniti, doloremque enim ratione recusandae reprehenderit, ullam
    unde vero voluptas voluptatum.
  </div>
  <div>Alias, aliquam atque aut culpa error harum hic minima neque sint vitae! Animi facere id iusto labore reiciendis?
    Atque cum debitis iste iusto laboriosam molestias, nam natus odio repellat soluta!
  </div>
  <div>Ea enim quos tenetur voluptate? Ad autem deleniti dolorum earum excepturi facilis magni optio provident quae quas
    quis quisquam quos, recusandae repellendus sed, velit vero. In maxime nisi quod similique!
  </div>
  <div>Architecto dicta dolores harum illo iste iusto laborum mollitia possimus totam veniam! Culpa fugiat iure quod sit
    voluptatum? Ad aspernatur at dolore labore laboriosam nesciunt optio qui quis quo voluptatibus.
  </div>
  <div>Aliquam culpa cupiditate deserunt odit saepe. Aspernatur autem deleniti doloremque doloribus ducimus ea eligendi
    enim, eos eveniet explicabo inventore itaque molestias natus odit pariatur, perspiciatis quod sunt tempora tempore
    veniam.
  </div>
  <div>Adipisci autem consectetur consequuntur corporis cupiditate ea est expedita explicabo, iusto, labore minima modi
    necessitatibus nesciunt numquam officiis, possimus recusandae repellendus rerum saepe sapiente tempora totam ullam
    veniam veritatis voluptatum.
  </div>
  <div>A dolore doloribus laboriosam laborum minima modi natus perferendis, provident ratione, reprehenderit repudiandae
    saepe soluta tenetur velit voluptate. A ad amet animi at commodi minima nisi numquam voluptatibus. Quibusdam, rerum!
  </div>
  <div>Ab accusamus assumenda beatae culpa cupiditate, ducimus facere illo incidunt molestiae nam necessitatibus non
    odit quasi qui repellendus rerum voluptate voluptatum. Deserunt impedit inventore natus officiis saepe sed velit
    voluptate?
  </div>
  <div>Atque cum delectus ipsam laudantium molestiae molestias nemo odit, porro provident qui! Ipsam, ut voluptate? A
    aspernatur dolorem eligendi facere perferendis praesentium quod? Deleniti fugit nulla perspiciatis sequi tempora,
    vel?
  </div>
  <div>Adipisci alias ea fugit in, itaque neque sunt vero? Adipisci animi consequatur deleniti eligendi esse maxime
    officia quas quasi rem rerum? Commodi dolorum eaque, illum laborum nobis pariatur repellendus suscipit.
  </div>
  <div>Accusantium aperiam at, culpa cupiditate doloribus esse exercitationem facere illum ipsa ipsum itaque maiores
    nobis officiis provident quibusdam repudiandae suscipit velit vero, voluptatibus voluptatum! Asperiores dicta in non
    repellat tempora.
  </div>
  <div>At culpa ducimus eos inventore maxime molestiae molestias quidem sit? Accusantium cum cupiditate dolorum fugit
    illum, inventore ipsum laboriosam neque quam, quia quidem recusandae veniam. At sequi tenetur vel voluptas?
  </div>
  <div>Animi debitis ipsum obcaecati sint suscipit veniam? Corporis doloribus facilis repellat sit temporibus tenetur
    voluptatem, voluptatum. Adipisci autem ex harum, impedit iste magni nam odit quaerat quisquam ratione, sunt, veniam!
  </div>
  <div>Animi atque consequatur corporis dolorum ea error excepturi, explicabo hic in nam nemo omnis pariatur,
    perspiciatis provident quam quidem recusandae repellendus sit soluta tempora ullam ut voluptas voluptatem. Ad,
    cumque.
  </div>
  <div>Alias blanditiis consequatur deleniti dolores eligendi enim expedita fugit, ipsa iure, iusto, minima nihil optio
    quaerat quas tempore totam veniam. Amet dolorem ducimus ex expedita hic laborum officia, quasi sequi.
  </div>
  <div>Accusantium architecto distinctio enim fugit harum laboriosam quas ratione, recusandae repudiandae sequi suscipit
    veniam veritatis, vitae! Alias autem et eveniet explicabo magni nisi quasi quia quibusdam, tenetur, vel velit,
    voluptatem?
  </div>
  <div>Aspernatur aut blanditiis corporis eius, laudantium minus neque nostrum obcaecati officiis, omnis optio
    praesentium provident quam quibusdam, sapiente suscipit ullam. Consequatur consequuntur enim labore laudantium, non
    soluta suscipit vitae voluptatibus?
  </div>
  <div>A cupiditate dignissimos distinctio earum ex, excepturi, fuga harum labore nobis quasi vero voluptas. Ex
    excepturi in ipsa iusto minima necessitatibus perspiciatis quia similique tenetur. Eveniet mollitia nesciunt odit
    veritatis.
  </div>
  <div>Accusamus adipisci consequuntur, culpa cumque debitis eaque eligendi enim eos eum, ex fuga fugit id incidunt
    minima mollitia nostrum nulla odio quaerat quas quis quod rerum saepe sapiente, velit veniam!
  </div>
  <div>A adipisci at cupiditate debitis dolor doloribus dolorum eius excepturi illo iusto magnam magni molestias neque
    nesciunt nisi pariatur placeat quae qui repellendus, saepe sint soluta suscipit vero vitae voluptates.
  </div>
  <div>Blanditiis culpa doloribus, eos ipsam rerum voluptatum? Accusamus alias cumque est fugiat, illum inventore
    possimus rem sequi vitae voluptates! Accusantium blanditiis labore optio saepe temporibus. Consectetur eos quibusdam
    sunt totam.
  </div>
  <div>Accusantium, architecto aut consequuntur ducimus, facilis harum hic ipsam, molestias nam nesciunt officiis
    pariatur porro rem sit ut voluptate voluptatum? Corporis culpa ducimus itaque iure nisi placeat rem, reprehenderit
    veniam!
  </div>
  <div>Adipisci atque commodi delectus facilis nisi nobis porro quia rerum tempora! Adipisci deserunt eveniet nobis
    placeat possimus quaerat, sit vel? Culpa delectus distinctio dolorem ducimus officia perferendis quia, quis vel!
  </div>
  <div>Ab aperiam aspernatur assumenda corporis cum dolore, doloribus eius eveniet, exercitationem facilis id inventore
    iste magnam natus odio optio perspiciatis quam quas reiciendis repudiandae rerum temporibus tenetur ullam velit
    veniam?
  </div>
  <div>Consequatur, deserunt distinctio dolore dolorem eligendi expedita ipsa labore magni nulla obcaecati officia optio
    porro quod sed sit tempora veniam! Aliquid asperiores cumque distinctio expedita minima minus obcaecati, rem
    veritatis.
  </div>
  <div>Asperiores cum distinctio facilis harum minima officiis reprehenderit similique vitae. Aperiam asperiores
    consequatur corporis, dolore ex illo ipsam itaque labore optio qui, quisquam rem repudiandae rerum sapiente soluta
    totam voluptates.
  </div>
  <div>Alias animi consequuntur et in magnam porro quo ratione, sapiente suscipit voluptatum? A ad aut consequatur
    distinctio dolor excepturi magnam obcaecati odit officiis totam? Architecto corporis dolorem doloribus eaque ipsam!
  </div>
  <div>Aut blanditiis consequuntur cupiditate distinctio dolore, eaque eos error excepturi modi odio officia optio
    placeat qui, quibusdam repellat rerum ullam vel? Aliquid error et quae sequi! Facilis quam sequi sit.
  </div>
  <div>Aut culpa debitis dolores eos fugit illum inventore iste maiores, obcaecati porro rem reprehenderit rerum
    suscipit tenetur vel! Ad adipisci consequuntur corporis odio. Animi dignissimos ducimus laboriosam unde. Accusamus,
    illo.
  </div>
  <div>Amet, autem cumque eligendi error inventore nam nemo non officia perferendis placeat sequi sit! Atque dicta
    ducimus, earum facilis fuga illo magni necessitatibus odio quas, repellat sequi, sunt suscipit vero.
  </div>
  <div>Amet assumenda debitis dolores explicabo hic itaque minima repellendus saepe similique unde. Ad, est ex
    exercitationem explicabo libero, minus odio quibusdam recusandae repellat, sed similique soluta sunt. Iste, nam,
    rem.
  </div>
  <div>Accusantium ad animi consequuntur distinctio enim eos expedita explicabo facilis illum, in magni molestiae nam
    nobis optio quasi quidem quo recusandae similique sunt, temporibus? Atque beatae explicabo nesciunt repudiandae
    voluptatum.
  </div>
  <div>Ab ducimus fuga fugit id ipsum libero magni molestias odit officiis optio, quaerat quasi quidem ratione repellat
    sit! Amet aperiam atque commodi excepturi exercitationem ipsam ipsum necessitatibus odio quisquam suscipit.
  </div>
  <div>Culpa harum modi repudiandae veritatis? Aperiam atque earum esse, harum ipsum itaque iure laborum libero nesciunt
    nisi nobis non odio possimus praesentium quibusdam quos reprehenderit rerum sequi vero voluptatem? Quos!
  </div>
  <div>Aliquam amet aut cupiditate debitis, deleniti doloremque dolorum expedita explicabo fuga illo, magnam magni
    molestias odio quas, quos reprehenderit repudiandae suscipit ullam veniam voluptatum. Dolore iste pariatur provident
    quam quos.
  </div>
  <div>Amet aspernatur, at autem excepturi facilis fugiat iusto laborum libero nam, nostrum officia, quasi tempore?
    Autem blanditiis illo nemo non placeat temporibus vitae! Beatae dolorum, eos expedita incidunt quam quia?
  </div>
  <div>Alias consequatur, debitis ducimus, eius esse facilis fuga ipsum labore nihil nulla placeat porro, sed soluta!
    Beatae consequuntur culpa cupiditate doloremque dolores dolorum, error, eveniet facere iste mollitia quis
    voluptatum.
  </div>
  <div>Cumque ex mollitia nisi quidem unde vitae. Aperiam commodi distinctio, enim et exercitationem iusto, labore
    laboriosam laborum modi nobis possimus sapiente similique sunt? Adipisci dolorem laudantium maiores quasi quis,
    rerum.
  </div>
  <div>Atque culpa cum eaque harum! Cumque enim modi necessitatibus perferendis? Aspernatur, corporis dolor
    exercitationem hic nemo numquam quia soluta. Cumque eligendi fuga iure nesciunt perspiciatis rem repellat
    repellendus voluptates voluptatibus.
  </div>
  <div>Alias aperiam atque deleniti eligendi ex exercitationem illum, maxime modi reprehenderit! A delectus esse, labore
    nostrum quo reprehenderit? Eius eligendi impedit inventore magnam officiis omnis sequi tempore totam velit
    voluptatibus?
  </div>
  <div>Dolor dolorem ducimus eaque eius, fugit id incidunt iusto laboriosam minus molestiae nesciunt nihil non odio
    praesentium quae quis reiciendis repellendus reprehenderit sed ullam ut vel velit vero, voluptatem voluptatibus!
  </div>
  <div>Aperiam assumenda dignissimos est incidunt laudantium libero maxime numquam optio, pariatur praesentium quas quo
    quos ratione repellat repellendus reprehenderit repudiandae sed similique soluta temporibus tenetur veritatis
    voluptas. Doloremque, pariatur, sit.
  </div>
  <div>Aliquam commodi minima porro repellendus vel. Accusantium adipisci animi consequatur corporis debitis delectus
    deserunt fugiat placeat ratione rerum? A culpa doloremque esse expedita maxime odio officiis omnis quaerat soluta
    unde.
  </div>
  <div>Aliquid aut blanditiis eaque fugiat illo iure labore, modi officia omnis pariatur vero, voluptatibus. Aliquam at,
    consectetur consequatur dolor eos expedita, illum, inventore ipsa magni modi nostrum perferendis porro quasi!
  </div>
  <div>Adipisci beatae culpa delectus dolore eius eveniet facere fuga iste modi, numquam reiciendis sapiente similique,
    temporibus. Asperiores, delectus deleniti eum explicabo fugiat harum maiores modi quis reiciendis repellendus
    suscipit voluptatum.
  </div>
</div>

<script>
    let btn2 = document.querySelector("#btn2");
    btn2.addEventListener("click",function () {
        alert("点击了按钮2")
    });

    let spanE = document.querySelector("span");
    spanE.addEventListener("mouseover",function () {
      console.log("路过一次")
    })
    window.addEventListener("scroll",function () {
      console.log("滚动一次")
    })
    window.addEventListener("resize",function () {
      console.log("窗口大小变化")
    })

    document.addEventListener('visibilitychange' , function () {
        if(document.visibilityState === 'hidden'){
          console.log("用户离开了一次")
        }else {
          console.log("用户回来一次")
        }
    })
</script>

</body>
</html>